<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-affix :offset-top="0">
      <div id="navigation-containerDiv">
        <el-row id="navigation-rowContainer">
          <el-col
            :span="leftWeight"
            class="colItem font-bold select-none gap-2"
            style="font-family: 'SourceHanSansSC'"
          >
            <slot name="left">
              <OhVueIcon :name="iconName"></OhVueIcon>
              <div
                style="margin-bottom: 0.1rem; font-size: 1rem"
                class="text-l text-ellipsis overflow-hidden whitespace-nowrap w-box"
              >
                {{ title }}
              </div>
            </slot>
          </el-col>
          <el-col
            :span="centerWeight"
            class="colItem"
          >
            <div
              style="width: 100%; height: 100%"
              class="custom-style flex justify-start items-center"
            >
              <slot name="center">
                <div class="flex-1 flex justify-start"></div>
              </slot>
            </div>
          </el-col>
          <el-col
            :span="rightWeight"
            class="colItem"
          >
            <div style="width: 100%; height: 100%">
              <slot name="right">
                <div class="w-h-full flex justify-center items-center">
                  <OhVueIcon
                    class="hover:cursor-pointer"
                    :name="`${isDark ? 'hi-solid-moon' : 'hi-solid-sun'}`"
                    @click="onClickColorMode"
                    scale="1.3"
                  ></OhVueIcon>
                </div>
              </slot>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-affix>
  </div>
</template>

<script lang="ts" setup>
import type { Option } from "element-plus/es/components/segmented/src/types.mjs";
import { OhVueIcon } from "oh-vue-icons";
const isDark = useDark();
const colorMode = useColorMode();

defineProps({
  title: {
    type: String,
    default: "",
  },
  iconName: {
    type: String,
    default: "",
  },
  leftWeight: {
    type: Number,
    default: 3,
  },
  centerWeight: {
    type: Number,
    default: 18,
  },
  rightWeight: {
    type: Number,
    default: 3,
  },
});
const darkMode = useDark();
if (darkMode.value) colorMode.preference = "dark";
else colorMode.preference = "light";
const onClickColorMode = () => {
  colorMode.preference = colorMode.preference == "dark" ? "light" : "dark";
  darkMode.value = !darkMode.value;
};
const activeName = ref("first");
</script>

<style lang="scss" scoped>
#navigation-containerDiv {
  height: clamp(30px, 5vmax, 40px);
  box-shadow: 0px 0.1px 2px 0.1px var(--color);
  backdrop-filter: blur(2px);
}

#navigation-containerDiv #navigation-rowContainer .colItem {
  width: 100%;
  height: clamp(30px, 5vmax, 40px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.actionText-box {
  width: 5rem;
  height: 100%;
  display: flex;
  justify-content: center;
  opacity: 0.3;
  font-weight: bold;
  @apply text-sm;

  &:hover {
    opacity: 1;
  }
}

.demo-tabs {
  margin-top: 0.9rem;
}
:deep(.el-tabs__item.is-active) {
  color: var(--color);
}
:deep(.el-tabs__item:hover) {
  color: var(--color);
}
:deep(.el-tabs__active-bar) {
  background-color: var(--color);
}
:deep(.el-tabs__item.is-top) {
  opacity: 0.3;
}
:deep(.el-tabs__item.is-active) {
  opacity: 1;
}
</style>
